{% extends "base.html" %}

{% block title %}{% endblock %}
{% block js %}

{% endblock %}
{% block jquery %}
    
$('#original a').bind('mouseover', function(e){

    var e = e ? e : window.event;

    $('#suggestions').css('top', e.pageY-90);
    $('#suggestions').css('left', e.pageX);
    $('#suggestions').css('display', 'block');

    $('#original_text').empty();
    $('#original_text').append($(this).attr('rel').trim());


    $('#stextarea').val($(this).html().trim());

    if (e.preventDefault) {
        e.preventDefault();
    } else {
        return false;
    }

    
    var url = '/add_suggestion/' + $(this).attr('id') + '/{{ page.key.id }}/';  
    $('#tform').attr('action', url);
    
    $('#suggestions form').css('display', 'none');
});

$('#sugira').click(function(){
    $('#suggestions form').css('display', 'block');
});

$('#tform').submit(function() { 
 
    $.post($(this).attr('action'), {'suggestion': $('#stextarea').val()}, function(data) {
        alert('Sugestão enviada com sucesso!');
        $('#stextarea').val('');
    });
        
    return false;
});
    
$(".close").click(function(){
    $('#suggestions').css('display', 'none');
});

{% endblock %}

{% block content %}
<p id="teste"></p>
<h1>{{ page.title }}</h1>

<div id="suggestions">
    <a href="#" class="close">[ x ]</a>
    <h2>Texto Original</h2>
    <p id="original_text">blable</p>
    <a href="#" id="sugira">Sugira uma tradução melhor</a>
    <form method="post" action="" id="tform">
        <textarea rows="5" cols="60" id="stextarea"></textarea>
        <p><input type="submit" value="Enviar" /></p>
    </form>
</div>
<p>Licença: {{ page.license }}</p>
<p>Link: {{ page.link }}</p>
<p>Data: {{ page.date|date:"d/m/Y" }}</p>
<p>Status da tradução: {{ page.percentage }}%</p>

<div id="original">
{% for p in page.paragraphs %}
    <div class="paragraph">
	    <a href="#" rel="{{ p.text }}" id="{{ p.key.id }}">
	    {% if p.translation %}
	        {{ p.translation }}
	    {% else %}
	        {{ p.text }}
	    {% endif %}
        </a>
    </div>    
{% endfor %}
</div>

{% endblock %}
